@charset "utf-8";
body {
	
	overflow:hidden;
}
a{
	text-decoration:none;
	color:#F36;
	}
.clr{
	width:0;
	height:0;
	overflow:hidden;
	clear:both;
	padding:0;
	margin:0;
	}
.st-contnier{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	}
.st-contnier > input ,
.st-contnier > a
{
	width:25%;
	height:34px;
	line-height:34px;
	position:fixed;
	bottom:0;
	cursor:pointer;
	
	}
.st-contnier > input{
	opacity:0;
	z-index:1000;
	}
.st-contnier > a{
	z-index:10;
	font-weight:700;
	font-size:16px;
	background:#09F;
	text-align:center;
	color:#FFF;
	text-shadow:1px 1px 1px rgba(151,24,64,0.2);
	}
#st-control-1,#st-control-1 + a{
	left:0%;
	}
#st-control-2,#st-control-2 + a{
	left:25%;
	}
#st-control-3,#st-control-3 + a{
	left:50%;
	}
#st-control-4,#st-control-4 + a{
	left:75%;
	}

.st-contnier input:checked + a,
.st-contnier input:checked:hover +a{
	background:#009;
	}
.st-contnier input:checked + a:after{
	content:"";
	width:0;
	height:0;
	overflow:hidden;
	border:20px solid transparent;
	border-bottom-color:#009;
	position:absolute;
	bottom:100%;
	left:50%;
	margin-left:-20px;
	
	}
.st-contnier input:hover+a{
	background:#00F;
	
	}
	
	
	/*  内容 */

.st-scroll,
.st-panel{
	width:100%;
	height:100%;
	position:relative;
	
	}
.st-scroll{
	left:0;
	top:0;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-ms-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	
	/* 平滑过渡 */
	-webkit-transition::all 0.6s ease-in-out;
	-moz-transition:all 0.6s ease-in-out;
	-o-transition:all 0.6s ease-in-out;
	-ms-transition:all 0.6s ease-in-out;
	transition:all 0.6s ease-in-out;

	}
	
.st-panel{
	
	overflow:hidden;
	}
#st-control-1:checked ~ .st-scroll{
	-webkit-transform:translateY(0%);
	-moz-transform:translateY(0%);
	-o-transform:translateY(0%);
	-ms-transform:translateY(0%);
	transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
	-webkit-transform:translateY(-100%);
	-moz-transform:translateY(-100%);
	-o-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
	-webkit-transform:translateY(-200%);
	-moz-transform:translateY(-200%);
	-o-transform:translateY(-200%);
	-ms-transform:translateY(-200%);
	transform:translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
	-webkit-transform:translateY(-300%);
	-moz-transform:translateY(-300%);
	-o-transform:translateY(-300%);
	-ms-transform:translateY(-300%);
	transform:translateY(-300%);
}

.st-desc{
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	top:0;
	margin-left:-100px;
	background:#FFF;
	-webkit-transform:translateY(-50%) rotate(45deg);
	-moz-transform:translateY(-50%) rotate(45deg);
	-ms-transform:translateY(-50%) rotate(45deg);
	-o-transform:translateY(-50%) rotate(45deg);
	transform:translateY(-50%) rotate(45deg);

	}
[data-icon]:after{
	content:url(../images/logo.png);
	width:200px;
	height:200px;
	left:50%;
	top:50%;
	
	}
	
.st-login{/* 登录div*/
	width:300px;
	height:300px;
	position:absolute;
	left:60%;
	top:30%;
	}
.st-bg1{/* 账号登录 */
    background:url(../images/1.jpg);
	background-position:center;
	}	
.st-bg2{/* 关于社团  */
background:url(../images/3.jpg);
background-position:center;
}
.st-bg3{/* 关于我们  */
background:url(../images/5.jpg);
background-position:;

}
.st-bg4{/* 关于我们  */
background:url(../images/6.jpg);
background-position:center;
background-size:100% 100%;


}